<template>

	<view class="main">


		<u-navbar :bgColor="bgColor" :fixed="false" title="排班管理" placeholder="true" @rightClick="rightClick" :autoBack="true"></u-navbar>

		<view class="info">

			<u--form labelWidth="100" :model="formData" :rules="rules" ref="uForm">

				<u-form-item label="当前诊所" prop="mdname" borderBottom>
					<u--input disabled placeholder="请输入" v-model="formData.mdname" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>


				<u-form-item label="员工" prop="staffName" @click="showHs=true" borderBottom>
					<u--input placeholder="请选择员工" border="none" v-model="formData.staffName"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					<u-picker @cancel="showHs=false" :show="showHs" :columns="hsListData" keyName="name" @confirm="confirmHs"></u-picker>
				</u-form-item>

				<u-form-item label="排班日期" prop="arrival_at" @click="showTime=true" borderBottom>
					<u--input placeholder="请选择日期" border="none" v-model="formData.arrival_at"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					<u-datetime-picker :minDate="minDate" @cancel="showTime=false" @confirm="confirmTime()" :show="showTime" v-model="valueTime" mode="date"></u-datetime-picker>
				</u-form-item>

				<view>
					<view class="pbxz">排班选择</view>

					<view>
						<view class="row_a_c space-between zzzcc" @click="toggleSelection" v-if="isSelected">
							<view class="row_a_c">
								<image class="zcb" src="/static/images/zcb.png"></image>
								<view class="row_a_c">
									<view class="zcbwz">正常班</view>
									<view class="zcbsj">09:00 - 18:00</view>
								</view>
							</view>
							<u-icon name="checkmark-circle-fill" color="#27CCBB" size="20"></u-icon>
						</view>
						<view class="row_a_c space-between zzzcc" v-else @click="toggleSelection">
							<view class="row_a_c">
								<image class="zcb" src="/static/images/zcbb.png"></image>
								<view class="row_a_c">
									<view class="zcbwz">正常班</view>
									<view class="zcbsj">09:00 - 18:00</view>
								</view>
							</view>
							<u-icon name="checkmark-circle-fill" color="#D3D3D3" size="20"></u-icon>
						</view>
					</view>



					<view>

						<view class="row_a_c space-between zzzcc" @click="toggleSelection" v-if="!isSelected">
							<view class="row_a_c">
								<image class="zcb" src="/static/images/xxii.png"></image>
								<view class="row_a_c">
									<view class="zcbwz">休 息</view>
									<view class="zcbsj">09:00 - 18:00</view>
								</view>
							</view>
							<u-icon name="checkmark-circle-fill" color="#27CCBB" size="20"></u-icon>
						</view>

						<view class="row_a_c space-between zzzcc" @click="toggleSelection" v-else>
							<view class="row_a_c">
								<image class="zcb" src="/static/images/xxh.png"></image>
								<view class="row_a_c">
									<view class="zcbwz">休 息</view>
									<view class="zcbsj">09:00 - 18:00</view>
								</view>
							</view>
							<u-icon name="checkmark-circle-fill" color="#D3D3D3" size="20"></u-icon>
						</view>

					</view>



				</view>

			</u--form>

			<view @click="submit" class="butt center">保存</view>

		</view>
	</view>

</template>

<script>
	import api_scheduling from '@/api/scheduling.js';
	import api_employee from '@/api/employee.js';

	export default {
		async onShow() {
			this.access_token = uni.getStorageSync('access_token');
			if (!this.access_token) {
				uni.navigateTo({
					url: '/pages/auth/login'
				});
			} else {
				this.userInfo = uni.getStorageSync('userInfo');
				this.formData.mdname = this.userInfo.store.name;
				this.initMinDate();
				this.getStaffStoreListFuc();
				console.log('员工用户信息', this.userInfo);
			}
		},
		data() {
			return {
				minDate: true,
				isSelected: true, // 控制选中状态
				showHs: false,
				hsListData: null,
				access_token: null,
				userInfo: null,
				valueTime: Number(new Date()),
				showTime: false,
				rules: {
					staffName: {
						type: 'string',
						required: true,
						message: '请选择员工',
						trigger: ['blur', 'change']
					},
					arrival_at: {
						type: 'string',
						required: true,
						message: '请选择排班日期',
						trigger: ['blur', 'change']
					},
				},
				bgColor: 'rgba(0, 31, 63, 0)',
				formData: {
					arrival_at: null,
					mdname: null,
					staff: null,
					staffName: null,
					data: null,
				},
			};
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {

			// 获取门店所有员工列表
			async getStaffStoreListFuc() {
				var per = {
					no_page: 1,
					page_size: 100
				}
				const res = await api_employee.getStaffStoreList(per);
				if (res.code == 1) {
					this.hsListData = [res.data.list];
				} else {
					this.$util.msg(res.message);
					return;
				}
			},
			toggleSelection() {
				this.isSelected = !this.isSelected; // 切换选中状态
			},

			confirmHs(e) {
				this.formData.staff = e.value[0].id;
				this.formData.staffName = e.value[0].name;
				this.showHs = false;
				this.$refs.uForm.validateField('staffName', (valid) => {});
			},

			confirmTime(e) {
				const date = new Date(e.value);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				this.formData.arrival_at = `${year}-${month}-${day}`;
				this.showTime = false;
				this.$refs.uForm.validateField('arrival_at', (valid) => {});
			},

			formatDate(value) {
				if (typeof value === 'number') {
					const date = new Date(value); // 时间戳转换为日期对象
					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0');
					const day = String(date.getDate()).padStart(2, '0');
					return `${year}-${month}-${day}`;
				}
				return value; // 如果不是时间戳，则直接返回
			},
			initMinDate() {
				const today = new Date();
				today.setDate(today.getDate() + 1); // 设置为明天
				this.minDate = today.getTime(); // 获取明天的时间戳
			},


			submit() {
				this.$refs.uForm.validate().then(res => {
					this.addSchedulingFuc();
				}).catch(errors => {
					uni.$u.toast('请检查填写信息')
				})
			},
			//添加排班
			async addSchedulingFuc() {
				if (this.isSelected) {
					var bbb = 1
				} else {
					var bbb = 2
				}
				var hhh = {
					date: this.formatDate(this.valueTime),
					type: bbb
				}
				var per = {
					staff: this.formData.staff,
					data: [hhh],
				}
				const res = await api_scheduling.addScheduling(per);
				if (res.code == 1) {
					uni.$u.toast('成功')
				} else {
					this.$util.msg(res.message);
					return;
				}
			},

		}
	};
</script>

<style scoped lang="scss">
	.main {}

	.info {
		width: 100%;
		min-height: 1000rpx;
		background: #FFFFFF;
		top: 540rpx;
		padding: 50rpx 32rpx 32rpx 32rpx;
	}


	.form-container {
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.header {
		margin-bottom: 20rpx;
	}

	.xinga {
		width: 6rpx;
		height: 24rpx;
		background: #1FA194;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-right: 10rpx;
	}



	.header-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #1CC09B;
	}

	.header-subtitle {
		font-size: 20rpx;
		color: #B2B2B2;
	}

	.add-person {
		font-weight: 400;
		font-size: 24rpx;
		color: #1FA194;
		margin-bottom: 10rpx;
	}

	.add-person-btn {
		margin: 20rpx 0;
		height: 146rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 2rpx dashed #1FA194;
	}

	.add-person-note {
		font-size: 20rpx;
		color: #B2B2B2;
	}

	.yybut {
		width: 622rpx !important;
		height: 180rpx !important;
		background: #27CCBB !important;
		border-radius: 40rpx 40rpx 40rpx 40rpx !important;
	}


	::v-deep .u-form-item {
		line-height: 50px;
	}

	.pbxz {
		font-weight: 800;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.6);
		margin-top: 25rpx;
	}

	.zcb {
		width: 48rpx;
		height: 48rpx;
		margin-right: 16rpx;
	}

	.zcbwz {
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.85);
		margin-right: 8rpx;
	}

	.zcbsj {
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.6);
	}

	.zzzcc {
		margin-top: 50rpx;
	}

	.butt {
		width: 686rpx;
		height: 80rpx;
		background: #27CCBB;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		position: absolute;
		bottom: 150rpx;
	}


	::v-deep .u-input__content__field-wrapper {
		background-color: #FFFFFF;
	}
</style>